<template>
    <div class="confirm">
        <el-tabs type="border-card" v-model="item.activeName">
            <el-tab-pane :label="item.label"
                         :name="item.activeName"
                         style="background: white">
                <el-form v-show="activeName == 'dDetail'"
                         label-width="100px"
                         class="demo-ruleForm"
                         :rules="rules"
                         ref='detailForm'
                         :model="addDetail">
                    <el-form-item label='小区名称：' prop='communityName'>
                        <span v-text="addDetail.communityName" ></span>
                    </el-form-item>
                    <el-form-item label='单元名称：' prop='unitName' style="width: 100%">
                        <div v-html="addDetail.unitName"></div>
                    </el-form-item>
                    <el-form-item label='栋数：' prop='unitNum' style="width: 100%">
                        <div v-html="addDetail.unitNum"></div>
                    </el-form-item>
                    <el-form-item label='状态：' prop='unitStatus' style="width: 100%">
                        <div>{{addDetail.unitStatus | status}}</div>
                    </el-form-item>
                    <el-form-item label='咨询问候：' prop='unitContext' style="width: 100%">
                        <div v-html="addDetail.unitContext"></div>
                    </el-form-item>
                </el-form>
                <el-form :model="addDetail" :rules="rules" ref='detailForm' label-width="100px" class="demo-ruleForm" v-show="activeName != 'dDetail'">
                    <div class="row">
                        <el-form-item label="小区名称" prop="communityName">
                            <el-input v-model="addDetail.communityName" ></el-input>
                        </el-form-item>
                        <el-form-item label='单元名称' prop='unitName'>
                            <el-input v-model="addDetail.unitName"></el-input>
                        </el-form-item>
                        <el-form-item label='栋数' prop='unitNum'>
                            <el-input v-model="addDetail.unitNum" ></el-input>
                        </el-form-item>
                        <el-form-item label="状态选择" prop="unitStatus">
                            <el-select v-model="addDetail.unitStatus"  placeholder="请选择状态">
                                <el-option v-for="item in statusList"
                                           :label="item.text"
                                           :key="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="咨询问候" prop="content" style="width: 90%">
                            <vue-ueditor-wrap v-model="addDetail.unitContext" :config="myConfig"></vue-ueditor-wrap>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="success-button">
                    <el-button type="primary"
                               z-index="100"
                               :disabled='false'
                               class="fa fa-mail-reply"
                               @click="back()">&nbsp;返回&nbsp;&nbsp;
                    </el-button>
                    <el-button type="primary"
                               z-index="100"
                               class="fa fa-save"
                               :loading="addLoading"
                               v-show="activeName != 'dDetail'"
                               @click="save()">&nbsp;保存&nbsp;&nbsp;
                    </el-button>
                    <el-button type="primary"
                               z-index="100"
                               class="fa fa-save"
                               v-show="activeName == 'dDetail' && this.type == '1'"
                               @click="edit">&nbsp;编缉&nbsp;&nbsp;
                    </el-button>
                    <!--                    <el-button type="primary"-->
                    <!--                               z-index="100"-->
                    <!--                               class="fa  fa-paper-plane-o"-->
                    <!--                               :disabled="off"-->
                    <!--                               @click="save(true)">&nbsp;提交&nbsp;&nbsp;-->
                    <!--                    </el-button>-->
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import dateFunc from '@/utils/dateFunc'
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        name: "add",
        components: {
            VueUeditorWrap,
        },
        data(){
            let validateName = function(rule, value, callback) {
                if (value.trim() === '' || value === undefined || value === null) {
                    callback('请填写小区名称');
                } else if (value.trim().length > 10){
                    callback(new Error('字符数超长，最大值:10,实际值'+value.length+'!'));
                } else {
                    callback();
                }
            };
            return{
                type: '',
                addDetail:{
                    communityName: '',
                    unitName: '',
                    unitNum: '',
                    unitContext: '',
                    unitStatus: '',
                    createtime:''
                },
                statusList:[
                    {
                        value: 1,
                        text: '已建成'
                    },
                    {
                        value: 2,
                        text: '未建成'
                    }
                ],
                // status:{
                //   1:'已建成',
                //   2:'未建成'
                // },
                item:{
                    type:'ADD',
                    label:'新增单元',
                    name:'addDetail'
                },
                activeName: 'addDetail',
                loading:false,
                addLoading:false,
                rules:{
                    communityName:[
                        {required: true, message: '小区名称不能为空', trigger: 'blur'},
                        {validator:validateName}
                    ],
                    unitName:[
                        {required: true, message: '单元名称不能为空', trigger: 'blur'},
                    ],
                    unitNum:[
                        {required: true, message: '栋数不能为空', trigger: 'blur'}
                    ],
                    unitStatus:[
                        {required: true, message: '状态不能为空', trigger: 'change'}
                    ]

                },
                myConfig: {
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'emotion', 'map', 'insertcode', 'background', '|',
                        'horizontal', 'date', 'time', 'spechars', '|',
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
                        'print', 'preview',
                    ]],
                    autoHeightEnabled: false,// 编辑器不自动被内容撑高
                    initialFrameHeight: 300, // 初始容器高度
                    initialFrameWidth: '100%',// 初始容器宽度
                    serverUrl:'',
                    UEDITOR_HOME_URL: '/UEditor/',
                    maximumWords:'100000000'
                },
            }
        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });

        },
        mounted(){
            this.getParams();
        },
        // 数字转中文过滤
        filters:{
            status(value){
                if (value == '1'){
                    return '已建成'
                } else {
                    return '未建成'
                }
            }
        },
        methods:{
            // 判断类型
            getParams(){
                //规则编码
                let type = this.$route.query.type;
                this.detailId = this.$route.query.detailId;
                if (type == 'ADD') {
                    this.activeName = 'addDetail'
                }else if (type == 'DETAIL') {
                    this.activeName = 'dDetail';
                    this.item.label = '单元详情';
                    this.getDetail();
                }
            },
            back(){
                this.$router.go(-1)
            },

            // 编辑
            edit(){
                this.activeName = 'editDetail'
                this.item.label = '编辑单元'
            },

            // 获取详细信息
            getDetail(){
                console.log(this.detailId,'获取id')
                const id = this.detailId
                // console.log(this.result,1111)
                this.$axiosToken({
                    url: '/house/getDetailId',
                    method: 'get',
                    data:{id},
                    success:(result)=>{

                        this.addDetail.communityName = result[0].communityname;
                        this.addDetail.unitName = result[0].unitname;
                        this.addDetail.unitNum = result[0].unitnum;
                        // this.status转化为文字
                        this.addDetail.unitStatus = result[0].unitstatus;
                        this.addDetail.unitContext = result[0].unitcontext;
                        console.log(this.addDetail,1111)
                    },

                })
            },
            // 保存
            save(){
                this.$refs['detailForm'].validate((valid)=>{
                    if (!valid){
                        this.$message.error({
                            message: "录入信息不能为空",
                            duration: 2000
                        });
                    } else {
                        this.$confirm('确认提交信息？','提示',{}).then(()=>{
                            this.addLoading = true
                            if (this.activeName == 'addDetail'){
                                this.$axiosToken({
                                    url: '/house/addunitList',
                                    method: 'post',
                                    data:{
                                        id: this.addDetail.id,
                                        communityname: this.addDetail.communityName,
                                        unitname: this.addDetail.unitName,
                                        unitnum: this.addDetail.unitNum,
                                        unitstatus: this.addDetail.unitStatus,
                                        unitcontext: this.addDetail.unitContext,
                                    },
                                    success: (result)=>{
                                        this.$message({
                                            showClose: true,
                                            message: '房屋信息录入成功',
                                            type: 'success'
                                        })
                                        this.back()
                                    }
                                });
                            } else {
                                // 更新信息
                                this.$axiosToken({
                                    url: '/house/updateunitList',
                                    method: 'post',
                                    data:{
                                        u_id: this.detailId,
                                        communityname: this.addDetail.communityName,
                                        unitname: this.addDetail.unitName,
                                        unitnum: this.addDetail.unitNum,
                                        unitstatus: this.addDetail.unitStatus,
                                        unitcontext: this.addDetail.unitContext,
                                    },
                                    success: (result)=>{
                                        this.$message({
                                            showClose: true,
                                            message: '房屋信息更新成功',
                                            type: 'success'
                                        })
                                        setTimeout(() => {
                                            this.addLoading = false;
                                        }, 1000);
                                        this.back()
                                    }
                                });
                            }
                        })

                    }
                })
            },


        },
    }
</script>

<style scoped>
    .row{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    /deep/ .el-form-item{
        width: 44%;
        padding-left: 20px;
    }
    /deep/ .el-input{
        width: 100%;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    /deep/ .el-button{

    }
    .el-select{
        width: 100%;
    }
    .success-button{
        position: fixed;
        top: 27%;
        right: 20px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .success-button>.el-button{
        width: 85px;
        margin-bottom: 15px;
        border-radius: 4px;
        font-size: 14px;
        padding: 10px 15px
    }
    .success-button>.el-button:nth-child(1){
        margin-left: 10px;
    }
</style>